import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CommonTable } from 'components';
import SearchList from './SearchList/SearchList';
import {channelStatistics2Action, channelStatistics2Saga} from './index';
import {bindActionCreators} from "redux";
import moment from "moment/moment";

class ChannelStatistics2 extends Component {
    columns = [
        {
            title: '渠道名',
            dataIndex: 'channel',
            key: 'channel'
        },
        {
            title: '注册量',
            dataIndex: 'regNum',
            key: 'regNum',
            defaultSortOrder: 'descend',//默认排序
            sorter: (a, b) => a.regNum - b.regNum,
        },
        {
            title: '新客申请量',
            dataIndex: 'newSubNum',
            key: 'newSubNum',
            sorter: (a, b) => a.newSubNum - b.newSubNum,
        },
        {
            title: '新客放款量',
            dataIndex: 'newLoanNum',
            key: 'newLoanNum',
            sorter: (a, b) => a.newLoanNum - b.newLoanNum,
        },
        {
            title: 'UV',
            dataIndex: 'UV',
            key: 'UV',
            sorter: (a, b) => a.UV - b.UV,
        },
        {
            title: '申请率',
            dataIndex: 'applyRate',
            key: 'applyRate',
            sorter: (a, b) => a.applyRate - b.applyRate,
        },
        {
            title: '放款率',
            dataIndex: 'payRate',
            key: 'payRate',
            sorter: (a, b) => a.payRate - b.payRate,
        },
        {
            title: 'UV转化率',
            dataIndex: 'uvRate',
            key: 'uvRate',
            sorter: (a, b) => a.uvRate - b.uvRate,
        }
    ]
    constructor(props) {
        super(props);
        this.state = {};
        this.searchParams = {
            time: [moment(0, 'HH'), moment({hour: 23, minute: 59, seconds: 59})]
        };
    }

    convertParams = () => {
        const { time, channelId = '',enabled } = this.searchParams;
        const isArr = Array.isArray(time) && time.length > 0;
        const startTime = isArr ? time[0].format('YYYY-MM-DD 00:00:00') : '';
        const endTime = isArr ? time[1].format('YYYY-MM-DD 23:59:59') : '';
        return { channelId, startTime, endTime,enabled };
    }
    handleSearch = (obj) => {
        const { getTableData } = this.props;
        this.searchParams = obj;
        const params = this.convertParams();
        getTableData({ ...params });
    }
    componentDidMount() {
        const { getTableData, getSourceData } = this.props;
        const params = this.convertParams();
        getTableData({ ...params });
        getSourceData({ pageSize: 10000, pageNum: 1 });
    }

    render() {
        const { tableData: { data }, loading, sourceData } = this.props;
        
        console.log('data=>',data);
        console.log('sourceData=>',sourceData);
        return (
            <div>
                <SearchList handleSearch={this.handleSearch} initTime={this.searchParams.time} sourceData={sourceData}/>
                <CommonTable
                    columns={this.columns}
                    dataSource={data}
                    pagination={null}
                    loading={loading}
                />
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const { channelManageState: { channelStatistics2State } } = state;
    return {
        tableData: channelStatistics2State['tableData'],
        loading: channelStatistics2State['loading'],
        sourceData: channelStatistics2State['sourceData']
    }
}
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: channelStatistics2Action.cs2GetTableData,
        getSourceData: channelStatistics2Action.cs2GetSourceData
    },dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ChannelStatistics2);